<template>
	<view class="points-container">
		<!-- 积分头部 -->
		<view class="points-header">
			<view class="points-title">我的积分</view>
			<view class="points-value">1,024</view>
			<view class="points-desc">积分可兑换商品或优惠券</view>
		</view>

		<!-- 积分banner -->
		<view class="points-banner">
			<image
				src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2215&q=80"
				mode="widthFix"></image>
		</view>

		<!-- 标签导航 -->
		<view class="tab-nav">
			<view class="tab-item" :class="{active: activeTab === 0}" @click="switchTab(0)">积分商城</view>
			<view class="tab-item" :class="{active: activeTab === 1}" @click="switchTab(1)">兑换记录</view>
			<view class="tab-item" :class="{active: activeTab === 2}" @click="switchTab(2)">积分规则</view>
		</view>

		<!-- 积分商城 -->
		<view class="points-card" v-if="activeTab === 0">
			<view class="section-title">
				<text>热门兑换</text>
				<text class="section-more">查看全部 <uni-icons type="arrowright" size="12" color="#999"></uni-icons></text>
			</view>

			<view class="points-grid">
				<view class="points-item" v-for="(item, index) in hotItems" :key="index">
					<view class="points-item-image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="points-item-info">
						<view class="points-item-name">{{ item.name }}</view>
						<view class="points-item-price">
							<view class="points-item-value">{{ item.points }}积分</view>
							<button class="points-item-btn" @click="exchangeItem(item)">兑换</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠券兑换 -->
		<view class="points-card" v-if="activeTab === 0">
			<view class="section-title">
				<text>优惠券兑换</text>
				<text class="section-more">查看全部 <uni-icons type="arrowright" size="12" color="#999"></uni-icons></text>
			</view>

			<view class="points-grid">
				<view class="points-item" v-for="(coupon, index) in coupons" :key="index">
					<view class="points-item-info" style="padding: 15px;">
						<view class="points-item-name" style="height: auto;">{{ coupon.name }}</view>
						<view class="points-item-price" style="margin-top: 10px;">
							<view class="points-item-value">{{ coupon.points }}积分</view>
							<button class="points-item-btn" @click="exchangeCoupon(coupon)">兑换</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 兑换记录 -->
		<view class="points-card" v-if="activeTab === 1">
			<view class="points-list">
				<view class="points-list-item" v-for="(record, index) in exchangeRecords" :key="index">
					<view class="points-list-icon">
						<uni-icons :type="record.icon" size="18" color="var(--primary-color)"></uni-icons>
					</view>
					<view class="points-list-content">
						<view class="points-list-title">{{ record.name }}</view>
						<view class="points-list-desc">{{ record.date }}</view>
					</view>
					<view class="points-list-value">{{ record.value }}</view>
				</view>
			</view>
		</view>

		<!-- 积分规则 -->
		<view class="points-card" v-if="activeTab === 2">
			<view class="points-rules">
				<view class="rules-item">
					<view class="rules-title">如何获得积分</view>
					<view class="rules-content">
						1. 购物获得：每消费1元获得1积分<br>
						2. 评价获得：发表有效评价获得10积分<br>
						3. 签到获得：每日签到获得5积分<br>
						4. 活动获得：参与平台活动获得额外积分
					</view>
				</view>

				<view class="rules-item">
					<view class="rules-title">积分使用规则</view>
					<view class="rules-content">
						1. 积分可用于兑换商品或优惠券<br>
						2. 积分兑换后不可退回<br>
						3. 积分有效期为获得之日起一年<br>
						4. 不同等级会员可享受不同的积分特权
					</view>
				</view>

				<view class="rules-item">
					<view class="rules-title">积分兑换流程</view>
					<view class="rules-content">
						1. 在积分商城选择心仪商品<br>
						2. 点击"兑换"按钮<br>
						3. 确认兑换信息<br>
						4. 填写收货地址（如需要）<br>
						5. 完成兑换
					</view>
				</view>

				<view class="rules-item">
					<view class="rules-title">其他说明</view>
					<view class="rules-content">
						1. 平台保留对积分规则进行调整的权利<br>
						2. 如有积分异常，请联系客服处理<br>
						3. 最终解释权归平台所有
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="points-empty" v-if="activeTab === 1 && exchangeRecords.length === 0">
			<uni-icons type="file-text" size="50" color="#ddd" class="empty-icon"></uni-icons>
			<view class="empty-text">暂无兑换记录</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

	const activeTab = ref(0);

	// 热门兑换商品数据
	const hotItems = ref([{
			name: '便携式旅行收纳袋套装',
			points: '500',
			image: 'https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80'
		},
		{
			name: '多功能厨房小工具套装',
			points: '800',
			image: 'https://images.unsplash.com/photo-1631729371254-42c2892f0e6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
		},
		{
			name: '北欧风格陶瓷杯碟套装',
			points: '1200',
			image: 'https://images.unsplash.com/photo-1618354691792-d1d42acfd860?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2030&q=80'
		},
		{
			name: '便携式折叠水杯',
			points: '300',
			image: 'https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
		}
	]);

	// 优惠券数据
	const coupons = ref([{
			name: '满100元减10元优惠券',
			points: '100'
		},
		{
			name: '满200元减30元优惠券',
			points: '200'
		}
	]);

	// 兑换记录数据
	const exchangeRecords = ref([{
			name: '便携式旅行收纳袋套装',
			date: '2023-06-10 14:25:36',
			value: '-500',
			icon: 'gift'
		},
		{
			name: '满100元减10元优惠券',
			date: '2023-06-05 09:15:22',
			value: '-100',
			icon: 'ticket'
		},
		{
			name: '购物获得积分',
			date: '2023-06-01 18:30:45',
			value: '+200',
			icon: 'shop'
		}
	]);

	// 切换标签页
	const switchTab = (index) => {
		activeTab.value = index;
	};

	// 兑换商品
	const exchangeItem = (item) => {
		uni.showModal({
			title: '确认兑换',
			content: `确定要兑换${item.name}？将消耗${item.points}积分`,
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '兑换成功',
						icon: 'success'
					});
				}
			}
		});
	};

	// 兑换优惠券
	const exchangeCoupon = (coupon) => {
		uni.showModal({
			title: '确认兑换',
			content: `确定要兑换${coupon.name}？将消耗${coupon.points}积分`,
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '兑换成功',
						icon: 'success'
					});
				}
			}
		});
	};
</script>

<style lang="scss">
	.points-container {
		padding: 15px;
	}

	.points-header {
		background: linear-gradient(135deg, var(--primary-color), #ff9a9e);
		border-radius: 8px;
		padding: 20px;
		color: white;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(255, 106, 106, 0.2);
		position: relative;
		overflow: hidden;
	}

	.points-header:before {
		content: '';
		position: absolute;
		top: -20px;
		right: -20px;
		width: 120px;
		height: 120px;
		border-radius: 60px;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.points-title {
		font-size: 14px;
		margin-bottom: 10px;
		opacity: 0.9;
	}

	.points-value {
		font-size: 32px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.points-desc {
		font-size: 12px;
		opacity: 0.8;
	}

	.tab-nav {
		display: flex;
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
		position: relative;
	}

	.tab-item.active {
		color: var(--primary-color);
		font-weight: bold;
	}

	.tab-item.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 30px;
		height: 2px;
		background-color: var(--primary-color);
	}

	.points-card {
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.points-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}

	.section-title {
		padding: 15px;
		font-size: 15px;
		font-weight: bold;
		border-bottom: 1px solid var(--border-color);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section-more {
		font-size: 12px;
		color: #999;
		font-weight: normal;
	}

	.points-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 15px;
	}

	.points-item {
		background-color: #f9f9f9;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
	}

	.points-item-image {
		height: 120px;
		overflow: hidden;
	}

	.points-item-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.points-item-info {
		padding: 10px;
	}

	.points-item-name {
		font-size: 14px;
		margin-bottom: 5px;
		line-height: 1.4;
		height: 40px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.points-item-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.points-item-value {
		color: var(--primary-color);
		font-weight: bold;
		font-size: 15px;
	}

	.points-item-btn {
		background-color: var(--primary-color);
		color: white;
		border: none;
		border-radius: 12px;
		padding: 4px 8px;
		font-size: 12px;
	}

	.points-list {
		padding: 0 15px;
	}

	.points-list-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid var(--border-color);
	}

	.points-list-item:last-child {
		border-bottom: none;
	}

	.points-list-icon {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background-color: rgba(255, 106, 106, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.points-list-content {
		flex: 1;
	}

	.points-list-title {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.points-list-desc {
		font-size: 12px;
		color: #999;
	}

	.points-list-value {
		font-size: 16px;
		font-weight: bold;
		color: var(--primary-color);
	}

	.points-empty {
		text-align: center;
		padding: 40px 0;
	}

	.empty-icon {
		margin-bottom: 15px;
	}

	.empty-text {
		font-size: 15px;
		color: #999;
	}

	.points-rules {
		padding: 15px;
	}

	.rules-item {
		margin-bottom: 15px;
	}

	.rules-title {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.rules-content {
		font-size: 13px;
		color: #666;
		line-height: 1.5;
	}

	.points-banner {
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.points-banner image {
		width: 100%;
		height: auto;
		display: block;
	}
</style>